<template>
  <el-card class="top-header">
    <a href="/">
      <img src="../../assets/img/icon/logo.png" alt="" width="200px" style="float: left;margin-top: -26px;">
    </a>
    <span style="font-size: 32px;font-weight: normal;position:absolute;left: 120px;color: #fff">心 理 咨 询 预 约 平 台 </span>
    <i class="el-icon-switch-button" v-on:click="logout" style="font-size: 40px;float: right"></i>
  </el-card>
</template>

<script>
import {createRouter} from '../../router'

export default {
  name: 'Header',
  methods: {
    logout () {
      var _this = this
      this.$axios.get('/logout').then(resp => {
        if (resp && resp.data.code === 200) {
          _this.$store.commit('logout')
          _this.$router.replace('/login')
          // 清空路由，防止路由重复加载
          const newRouter = createRouter()
          _this.$router.matcher = newRouter.matcher
        }
      }).catch(failResponse => {
      })
    }
  }
}
</script>

<style scoped>
.top-header {
  background-color: #9495c5;
  height: 80px;
  /*opacity: 0.85;*/
  line-height: 40px;
  min-width: 900px;
}

.el-icon-switch-button {
  cursor: pointer;
  outline: 0;
}
</style>
